<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无限滚动</title>
<style>
body{ font-size:12px;}
.xMarquee{ width:280px;overflow:hidden;height:32px;}
img,a{border:0px;}
.l{ float:left; padding:20px;}
</style>
<script>
	function xMarquee(obj,fx,temp,speed){
		obj = document.getElementById(obj);
		var xh = obj.innerHTML;
		var sid = 'xScroll_'+Math.floor(Math.random()*10000);
		var neh = '';
		var fc ;
		if(fx==""||fx=="right"||fx==null){
		 	neh = '<div style="display:block;float:left;">'+xh+'</div>';
			obj.innerHTML = '<div id="'+sid+'" style=" width:9900%;">'+neh+neh+'<div style="clear:both;"></div></div>';
			fc = document.getElementById(sid).childNodes;
			if(fc[0].offsetWidth<=obj.offsetWidth){obj.innerHTML = xh;return;}
			document.getElementById(sid).style.width = fc[0].offsetWidth*2+'px';
		}else if(fx=="up"||fx=="down"){
			neh = '<div style="display:block;">'+xh+'</div>';
			obj.innerHTML = '<div id="'+sid+'">'+neh+neh+'<div style="clear:both;"></div></div>';
			fc = document.getElementById(sid).childNodes;
			if(fc[0].offsetHeight<=obj.offsetHeight){obj.innerHTML = xh;return;}
			document.getElementById(sid).style.height = fc[0].offsetHeight*2+'px';
		}
		var t = 0;
		if(fx==''||typeof fx == undefined||fx==null){fx = "left";}
		if(temp==''||typeof temp == undefined||temp==null){temp = 1;}
		if(speed==''||typeof speed == undefined||speed==null){speed = 50;}
		if(fx=="right"){obj.scrollLeft = fc[0].offsetWidth*2;t = fc[0].offsetWidth;}
		if(fx=="down"){obj.scrollTop = fc[0].offsetHeight*2;t = fc[0].offsetHeight;}
		var dos = function(speed){
			if(fx=="left"){
				t=t+temp;
				if(obj.scrollLeft>=fc[0].offsetWidth){
					t = temp+3;
					obj.scrollLeft=temp+3;
				}else{
					obj.scrollLeft=t;
				}
			}
			if(fx=="right"){
				t=t-temp;
				if(obj.scrollLeft<=0){
					t = fc[0].offsetWidth+3;
					obj.scrollLeft=fc[0].offsetWidth+3;
				}else{
					obj.scrollLeft=t;
				}
			}
			if(fx=="up"){
				t=t+temp;
				if(obj.scrollTop>=fc[0].offsetHeight){
					t = temp+3;
					obj.scrollTop=temp+3;
				}else{
					obj.scrollTop=t;
				}
			}
			if(fx=="down"){
				t=t-temp;
				if(obj.scrollTop<=0){
					t = fc[0].offsetHeight-3;
					obj.scrollTop=fc[0].offsetHeight-3;
				}else{
					obj.scrollTop=t;
				}
			}
		}
		var s = window.setInterval(function(){dos(speed)},speed);
		var over = function(e){
			e = e || window.event;
			if(e.stopPropagation) { //W3C阻止冒泡方法
				e.stopPropagation();
			} else {
				e.cancelBubble = true; //IE阻止冒泡方法
			}
			obj.setAttribute('data-status','over');
			window.clearInterval(s);
		}
		var out = function(){
			var _s = obj.getAttribute('data-status');
			if(_s == 'over'){
				obj.setAttribute('data-status','out');
				s = window.setInterval(function(){dos(speed)},speed);
			}
		}
		try{
			obj.addEventListener('mouseover',over,false);
			obj.addEventListener('click',over,false);
			obj.addEventListener('mouseout',out,false);
			document.addEventListener('click',out,false);
		}catch(e){
			//ie
			obj.attachEvent('onmouseover',over);
			obj.attachEvent('onmouseout',out);
		}
	}
	window.onload = function(){
		xMarquee('xMarquee5','up',1);
	}
</script>
</head>

<body>
<div class="3">
        	up:<br/>
            <div id="xMarquee5" class="xMarquee" style="height:150px;">
               <ul>
                   <li><h1>1</h1></li>
                   <li><h1>2</h1></li>
                   <li><h1>3</h1></li>
                   <li><h1>4</h1></li>
               </ul>
            </div>
            
</div>




</body>
</html>
